<template>
  <div class="el-aside" ref="rightContent">
    <div class="mosda"></div>
    <ul class="penguins">
      <li
        v-for="(item, index) in LyricsData"
        :key="index"
        :class="['active' + index]"
      >
        <span :class="[item.mos ? 'texst' : '', 'text']">
          {{ item.text }}{{ indexData[index] }}
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "ScrollingLyrics",
  props: ["ScrollingLyricsData"],
  // inject: ['getName'],
  watch: {
    getName(val) {
      // console.log(val);
    },
    indexDATS(e) {
      // console.log(e + "下标发生改变");

      this.gondo(e);
    },
    // 当切换下一首歌的时候
    ScrollingLyricsData(e) {
      console.log(e);
      const data = [...e];
      this.LyricsData = data;
      this.$refs.rightContent.scrollTop = 0;
      for (let index = 0; index < this.LyricsData.length; index++) {
        // this.indexData.push(false);this.LyricsData
        this.LyricsData[index].mos = false;
      }

      let maintainDates = JSON.parse(JSON.stringify(this.LyricsData));

      let a = 0;
      for (let index = 0; index < this.LyricsData.length; index++) {
        if (a + 1 < this.LyricsData.length) {
          a = a + 1;
          // console.log(this.LyricsData[index].time+"歌词出现的时间");
          // console.log(maintainDates[a].time+"下一句歌词出现的时间");
          this.maintainDates = [];
          this.maintainDates.push(
            maintainDates[a].time - this.LyricsData[index].time
          );
          // console.log( this.maintainDates );
        }
      }

      this.alldate = this.LyricsData.map((item) => {
        return item.time;
      });
    },
  },
  data() {
    return {
      LyricsData: [],
      paddingBottom: 50,
      gequDate: this.$store.state.lyricdate,
      indexData: [],
      maintainDates: [],
      // d定时器
      dingsqDate: "",
      alldate: [],
      // 当前相比是true的
      indexDATS: 0,
      bodx: "",
      ingundo: true,
    };
  },
  
  mounted() {
    // console.log("13456")

    this.bodx = this.$refs.rightContent;
    // this.bodx.scrollIntoView({ block: "start", behavior: "smooth" });
    // console.log(this.LyricsData);
    this.$refs.rightContent.addEventListener("scroll", this.scrool);
    this.$store.watch(
      (state, getters) => {
        return state.lyricdate;
      },
      (e) => {
        this.gequDate = parseInt(e);
        // console.log(this.gequDate);
        // console.log(e);
        this.onplayDate(e);
      }
    );
    this.$store.watch(
      (state, getters) => {
        return state.progressBar;
      },
      (e) => {
        // console.log(e);

        clearInterval(this.dingsqDate);

        let distanceIndex = 0;
        if (e > this.indexDATS) {
          distanceIndex = e - this.indexDATS;
          // console.log(distanceIndex);

          // this.bodx.scrollTop += 40 * (distanceIndex - 1);

          let a = this.bodx.scrollTop;
          a += 40 * (distanceIndex - 1);

          // console.log(a);

          this.bodx.scrollTo({
            top: a,
            behavior: "smooth",
          });
        } else {
          let a = 40 * (e - 1);

          // console.log(a);
          this.bodx.scrollTo({
            top: a,
            behavior: "smooth",
          });
        }
      }
    );
    // this.gondo();
  },
  methods: {
    // scrollToTop滚动监听
    scrollToTop() {},

    // 歌曲播放时间段的判断
    onplayDate(e) {
      // console.log(this.maintainDates);
      // console.log("1")
      for (let index = 0; index < this.LyricsData.length; index++) {
        this.$nextTick(() => {
          if (this.LyricsData[index].time - e <= 0.2) {
            if (index != 0) {
              this.LyricsData[index - 1].mos = false;
            }

            if (this.LyricsData[index].you != true) {
              this.LyricsData[index].mos = true;
              this.LyricsData[index].you = true;
              // console.log("触发了");
            } else {
              this.LyricsData[index].mos = true;
            }

            this.indexDATS = index;
          } else {
            this.LyricsData[index].mos = false;
          }
          this.$forceUpdate();
        });
      }
    },

    scrool() {
      // console.log("===scrool===");
      let scrolled = this.$refs.rightContent.scrollTop;
      // console.log(scrolled);
    },
    gondo(e) {
      if (e > this.indexDATS) {
        distanceIndex = e - this.indexDATS;
        // console.log(distanceIndex);

        // this.bodx.scrollTop += 40 * (distanceIndex - 1);

        let a = this.bodx.scrollTop;
        a += 50 * distanceIndex;
        // console.log(a);
        this.bodx.scrollTo({
          top: a,
          behavior: "smooth",
        });
      } else {
        let a = 50 * e;
        // console.log(a);
        this.bodx.scrollTo({
          top: a,
          behavior: "smooth",
        });
      }

      //   }
      // }
    },
    debounce() {
      // console.log(this.indexDATS);
    },
  },
 
};
</script>

<style lang="less" scoped>
.texst {
  color: rgb(48, 48, 48);
  font-size: 20px;
  font-weight: 550;
}
.mosda {
  height: 200px;
  // border: 1px solid #000;
}
// 网易云歌词滚动
.el-aside {
  width: 500px;
  position: relative;
  // transition: all 1s;
  text-overflow:clip;
white-space:nowrap;规定段落中的文本不进行换行
  &:hover {
    &::-webkit-scrollbar-thumb {
      background-color: #666;
    }
  }
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-track {
    background: none;
  }
  &::-webkit-scrollbar-thumb {
    background: none;
  }
  &::-webkit-scrollbar-track-piece {
    background: none;
  }

  height: 450px;
  background: none !important;
  border: none !important;

  overflow-x: hidden;
  // overflow-y:hidden;
  .bodske {
    height: 220px;
    // border: 1px solid #000;
  }
  ul {
    padding-bottom: 260px;

    li {
      height: 50px;
      line-height: 40px;
      text-align: center;
      font-size: 18px;
    }
  }
}
</style>